<!--
@BLINK-ALLOW:focus*
@AURALINUX-ALLOW:focus*
@WAIT-FOR:done
-->
<!-- Only the first image that uses a given map gets its area children. -->
<img id="img1" alt="star1" usemap="#map1"
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E">
<img id="img2" alt="star2" usemap="#map1"
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E">
<img id="img3" alt="star3" usemap="#map2"
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E">
<img id="img4" alt="star4" usemap="#map2"
     src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E">
<map name="map1">
  <area shape="rect" coords="0,0,5,5" href="about:blank" alt="Area">
</map>
<map name="map2">
  <area shape="rect" coords="0,0,5,5" href="about:blank" alt="Area">
  <area shape="rect" coords="3,3,8,8" href="about:blank" alt="Area2" autofocus>
</map>
<div id="container">
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
      // All maps get the same name, therfore the first image doesn't have a
      // map anymore, and it becomes an image with no children.
      // Only the third image will be an image map.
      document.querySelector('map[name="map1"]').name = "map2";
      document.title = 'done';
    }, 250);
  });
</script>
